<template>
  <div>
    <h2>Counter: {{ count }}</h2>
    <p>Double: {{ doubleCount }}</p>
    <p>User: {{ user ? user.name : 'Not logged in' }}</p>
    <p>Authenticated: {{ isAuthenticated }}</p>
    <br> <br>
    <el-button @click="increment">Increment</el-button>
    <el-button @click="login({ username: 'john', password: 'doe' })">Login</el-button>
    <el-button @click="logout">Logout</el-button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import { useCounterStore } from '@/store/counter.js'

export default {
  computed: {
    // 映射 state
    ...mapState(useCounterStore, ['count', 'user']),

    // 映射 getters
    ...mapState(useCounterStore, ['doubleCount', 'isAuthenticated']),

    // 也可以自定义计算属性
    formattedCount() {
      return `Count: ${this.count}`
    }
  },

  methods: {
    // 映射 actions
    ...mapActions(useCounterStore, ['increment', 'login', 'logout']),

    // 自定义方法
    customIncrement() {
      this.increment()
      console.log('Count incremented!')
    },
    increment3() {
      const store = useCounterStore(this.$pinia)
      store.increment()
    }
  },

  mounted() {
    // 在生命周期中访问 store
    console.log('Initial count:', this.count)
  }
}
</script>
